<template>
  <div>
    <el-card class="box-card1">
      <div slot="header" class="clearfix">
        <span>待办事项</span>
      </div>
      <div class="text item">
        <el-row :gutter="20">
          <el-col :span="6">
            <div style="display: flex; flex-direction: column;">
              <el-statistic
                group-separator=","
                :value="indexData.value1"
                :value-style="valueStyle"></el-statistic><br>
              <span class="statistic_title">待初审项目</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div style="display: flex; flex-direction: column;">
              <el-statistic
                group-separator=","
                :value="indexData.value2"
                :value-style="valueStyle"></el-statistic><br>
              <span class="statistic_title">募集中项目</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div style="display: flex; flex-direction: column;">
              <el-statistic
                group-separator=","
                :value="indexData.value3"
                :value-style="valueStyle"></el-statistic><br>
              <span class="statistic_title">待复审项目</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div style="display: flex; flex-direction: column;">
              <el-statistic
                group-separator=","
                :value="indexData.value4"
                :value-style="valueStyle"></el-statistic><br>
              <span class="statistic_title">待还款项目</span>
            </div>
          </el-col>
        </el-row><br>
      </div>
    </el-card>
    <el-card class="box-card1">
      <div slot="header" class="clearfix">
        <span>业务快捷操作入口</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="4">
          <div class="center-content" @click="$router.push('/main/preliminary_loan_review')">
            <img src="../../assets/images/u151.png">
            <br>
            <span class="statistic_title">借款初审</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="center-content" @click="$router.push('/main/full_standard_review')">
            <img src="../../assets/images/u300.png">
            <br>
            <span class="statistic_title">满标复审</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="center-content" @click="$router.push('/main/pending_collection_management')">
            <img src="../../assets/images/u303.png">
            <br>
            <span class="statistic_title">贷后管理</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="center-content" @click="$router.push('/main/repayment_management')">
            <img src="../../assets/images/u297.png">
            <br>
            <span class="statistic_title">还款管理</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="center-content" @click="$router.push('/main/recharge')">
            <img src="../../assets/images/u288.png">
            <br>
            <span class="statistic_title">充值记录</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="center-content" @click="$router.push('/main/withdraw')">
            <img src="../../assets/images/u291.png">
            <br>
            <span class="statistic_title">提现记录</span>
          </div>
        </el-col>
      </el-row>
      <el-row><br></el-row>
      
    </el-card>
    <el-card class="box-card1">
      <div slot="header" class="clearfix">
        <span>运营快捷操作入口</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="4">
          <div class="center-content" @click="$router.push('')">
            <img src="../../assets/images/u158.png">
            <br>
            <span class="statistic_title">发布资讯</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="center-content" @click="$router.push('/main/addredEnvelope')">
            <img src="../../assets/images/u268.png">
            <br>
            <span class="statistic_title">添加红包</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="center-content" @click="$router.push('/main/addVouchers')">
            <img src="../../assets/images/u271.png">
            <br>
            <span class="statistic_title">添加加息券</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="center-content" @click="$router.push('/main/goods')">
            <img src="../../assets/images/u274.png">
            <br>
            <span class="statistic_title">添加商品</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="center-content">
            <img src="../../assets/images/u277.png">
            <br>
            <span class="statistic_title">反馈管理</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="center-content">
            <img src="../../assets/images/u280.png">
            <br>
            <span class="statistic_title">短信发送</span>
          </div>
        </el-col>
      </el-row>
      <el-row><br></el-row>
    </el-card>
    <el-card class="box-card1">
      <div slot="header" class="clearfix">
        <span>数据总览</span>
      </div>
      <div class="text item">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card shadow="hover" style="width: 100%;">
              <div style="width: 100%; display: inline-block; ">
                <el-statistic
                group-separator=","
                :value="indexData.value5"
                title="累计出借金额(元)"
                :value-style="valueStyle2"></el-statistic>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" style="width: 100%;">
              <div style="width: 100%; display: inline-block; ">
                <el-statistic
                group-separator=","
                :value="indexData.value6"
                title="累计注册用户(人)"
                :value-style="valueStyle2"></el-statistic>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" style="width: 100%;">
              <div style="width: 100%; display: inline-block; ">
                <el-statistic
                group-separator=","
                :value="indexData.value7"
                title="今日新增注册用户(个)"
                :value-style="valueStyle2"></el-statistic>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" style="width: 100%;">
              <div style="width: 100%; display: inline-block; ">
                <el-statistic
                group-separator=","
                :value="indexData.value8"
                title="今日发布项目数(个)"
                :value-style="valueStyle2"></el-statistic>
              </div>
            </el-card>
          </el-col>
        </el-row><br>
      </div>
    </el-card>
    <el-card class="box-card1">
      <div slot="header" class="clearfix">
        <span>资金流动</span>
      </div>
      <el-row>
        <el-col :span="5">
          <div style="width: 100%; display: inline-block; ">
            <el-statistic
            group-separator=","
            :value="indexData.value12"
            title="本月资金流动(元)"
            :value-style="valueStyle2"></el-statistic>
          </div>
          <el-row><br><br></el-row>
          <div style="width: 100%; display: inline-block; ">
            <el-statistic
            group-separator=","
            :value="indexData.value13"
            title="本周资金流动(元)"
            :value-style="valueStyle2"></el-statistic>
          </div>
        </el-col>
        <el-col :span="19">
          <div id="chart-container" style="width: 100%; height: 400px;"></div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
    import * as echarts from 'echarts';
    export default {
    data() {
      return {
        value2: 1314,
        value3:4634654564,
        valueStyle:{
          color: '#32CD32', 
          fontSize: '5vh'
        },
        valueStyle2:{
          fontSize: '4vh',
          fontWeight: 'bold'
        },
        indexData:{
          value1:'',
          value2:'',
          value3:'',
          value4:'',
          value5:'',
          value6:'',
          value7:'',
          value8:'',
          value12:'',
          value13:''
        },
        chartData: {
          legend: ['充值', '提现', '升值'],
          xAxis: ['03-05', '03-06', '03-07', '03-08', '03-09', '03-10', '03-11'],
          yAxis: [
            {
              type: 'value',
              minInterval: 500000,
            },
          ],
          series: [
            // 充值
            {
              name: '充值',
              type: 'bar',
              stack: '充值提现', // 添加stack属性，使充值和提现堆叠在一起
              data: [10000000, 10000000, 10000000, 10000000, 10000000, 10000000, 10000000],
              itemStyle: { color: '#00FF00' }, // 更改颜色
            },
            // 提现
            {
              name: '提现',
              type: 'bar',
              stack: '充值提现', // 添加stack属性，使充值和提现堆叠在一起
              data: [-50000000, -50000000, -50000000, -50000000, -50000000, -50000000, -50000000],
              itemStyle: { color: '#FF0000' }, // 更改颜色
            },
            // 升值
            {
              name: '升值',
              type: 'line',
              data: [0, 0, 0, 0, 0, 0, 0],
              lineStyle: { color: '#FFA500' }, // 更改线条颜色
            },
          ],
        },
      };
    },
    mounted(){
      this.getRecent7Days()
      this.getIndexData()
    },
    methods:{
      getIndexData(){
        this.$axios.get("/project/getIndexData").then(res=>{
          if (res.data.code == 200) {
            this.indexData = res.data.data
            this.chartData.series[0].data = res.data.data.value9; // 充值数据
            this.chartData.series[1].data = res.data.data.value10; // 提现数据
            this.chartData.series[2].data = res.data.data.value11; // 差值数据
            console.log(this.chartData);
            this.initChart()
          }
        })
      },
      initChart() {
        const chartContainer = document.getElementById('chart-container');
        if (!chartContainer) return;

        const chart = echarts.init(chartContainer);

        chart.setOption({
          series: this.chartData.series.map(series => {
                if (series.type === 'bar') {
                    // 设定柱子宽度为自适应的百分比，例如20%（根据需要调整）
                    series.barWidth = 50; // 对于旧版本可能需要 '20%'
                }
                return series;
            }),
          title: {
              text: '近七日资金流动',
          },
          tooltip: {},
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true,
          },
          xAxis: {
              type: 'category',
              //boundaryGap: false,
              data: this.chartData.xAxis,
          },
          yAxis: this.chartData.yAxis,
          series: this.chartData.series,
        });

        window.addEventListener('resize', () => {
            chart.resize();
        });
      },
      getRecent7Days() {
        const recent7Days = [];
        const today = new Date();
        for (let i = 0; i < 7; i++) {
          const date = new Date(today);
          date.setDate(today.getDate() - i); // 减去i天
          const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份，注意JavaScript月份从0开始，所以要加1
          const day = String(date.getDate()).padStart(2, '0'); // 获取日期
          recent7Days.push(`${month}-${day}`); // 格式化并推入数组
        }
        // 由于是倒序获取的，需要反转数组
        this.chartData.xAxis = recent7Days.reverse()
      },
    }
  };
</script>
</script>

<style scoped>
.box-card1 {
  margin-left:10vh;
  margin-right:7vh;
  margin-top:5vh;
}
.statistic_title{
  font-size:2.5vh;
  text-align:center;
}
.center-content {
  display: flex; /* 启用Flexbox布局 */
  flex-direction: column;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100%; /* 确保div的高度占满整个.el-col的高度 */
  cursor: pointer;
}
</style>